import React from 'react'
import ReactDOM from 'react-dom'

function Blob(props) {
  const sidebar = (
    <ul>
      {props.posts.map(post => 
        <li key={post.id}>
          {post.title}
          <br />
          {post.content}
        </li>
      )}
    </ul>
  )
  const content = props.posts.map(post => 
    <div>
      <h3>{post.title}</h3>
      <p>{ post.content}</p>
    </div>
  )
  return (
    <div>
      {sidebar}
      <br />
      {content}
    </div>
  )
}

const posts = [
  { id: 1, title: 'hello', content: 'welcomr to react' },
  { id: 2, title: 'nihao', content: '欢迎来到react' }
]

ReactDOM.render(
  <Blob posts={ posts }/>,
  document.getElementById('root')
)